<style type="text/css">
.nav-side-menu li:hover{
	background-color:#CCC!important;
}
a li:hover{
	background-color:#CCC!important;
}
.nav-side-menu ul{
	background:#FFF;border-left: 3px solid  #FFF;padding:5px;border-bottom: 1px dashed #D7D7D7;
}
.nav-side-menu ul li{
	background:#FFF;border-bottom: 1px dashed #D7D7D7;padding:5px;border-left: 3px solid #FFF;
}
.nav-side-menu .collapsed{
	background:#FFF;border-bottom: 1px dashed #D7D7D7;padding:5px;border-left: 3px solid #FFF;
}
.nav-side-menu ul .sub-menu li{
	background:#FFF;
	color:rgba(85,103,115,1)!important;
	border-bottom: 0px;
}
.nav-side-menu ul .sub-menu li .active{
	background:#FFF;
	color:#E54C2A!important;
	border-bottom: 0px;
}
.nav-side-menu ul .sub-menu li a{
	color:rgba(85,103,115,1)!important;
}
.nav-side-menu  ul  .sub-menu  li.active, .nav-side-menu li .sub-menu  li.active{
	color:rgba(85,103,115,1)!important;
}
#agent_resources li{
	background:#FFF;
	border-bottom:0px;
}
#how_it_works li{
	background:#FFF;
	border-bottom:0px;
}
th{
	width:60%;
	background:#999;	
}
</style>
<div class="nav-side-menu" style="color: rgb(89, 87, 87);background-color: #fff;border-radius: 16px;box-shadow: 0px 2px 8px rgba(0,0,0,0.16); width: 360px;margin-left: -80px; padding: 25px 5%;border-bottom: 1px dashed #D7D7D7;border-left: 3px solid #FFF;">
    <div class="brand" style="background-color: #fff;">{{'Member\'s Help'|translate}}</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
  
    <div class="menu-list" style="background:#FFF;border-left: 3px solid  #FFF; padding:5px">
  
      <ul id="menu-content" class="menu-content collapse out" style="background:#FFF;border-left: 3px solid  #FFF;padding:5px;border-bottom: 1px dashed #D7D7D7;">
          <li style="background:#FFF;border-bottom: 1px dashed #D7D7D7;padding:5px">
              <a [routerLink]="['content','FQAs']" style="color:rgba(85,103,115,1);">
                <i class="fa fa-user fa-lg"></i> {{'Market Research Update'|translate}}
              </a>
            </li>
          <li data-toggle="collapse" data-target="#how_it_works" class="collapsed active" style="background:#FFF;border-left: 3px solid #FFF;padding:5px">
            <a [routerLink]="['content','how_it_works']"  style="color:rgba(85,103,115,1);">
              <i class="fa fa-bars fa-lg"></i> {{'Sales Process & Information'|translate}}
            </a>
          </li>
          <ul class="sub-menu collapse show" id="how_it_works">
            <li class="active">
              <a [routerLink]="['content','user_guide']">{{'Latest Policy & Lending'|translate}}</a>
            </li>
            <li class="active">
              <a [routerLink]="['content','training_module']">{{'Training Module'|translate}}</a>
            </li>
            <li class="active">
              <a [routerLink]="['content','user_agreement']">{{'Agreement and Commission'|translate}}</a>
            </li>
          </ul>
  
        <li data-toggle="collapse" data-target="#agent_resources" class="collapsed active" style="background:#FFF;color: rgb(89, 87, 87);border-bottom: 1px dashed #D7D7D7;padding:5px;border-left: 3px solid #FFF;">
          <a [routerLink]="['content','agent_resources_instructions']"  style="color:rgba(85,103,115,1);">
            <i class="fa fa-bars fa-lg"></i> {{'Member Resources'|translate}}
          </a>
        </li>
        <ul class="sub-menu collapse show" id="agent_resources">
          <!-- <li class="active">
            <a [routerLink]="['content','expression_of_interest']">{{'Expression Of Interest'|translate}}</a>
          </li>
          <li class="active">
            <a [routerLink]="['content','contract_of_sale']">{{'Contract of Sale'|translate}}</a>
          </li> -->
          <li class="active">
            <a [routerLink]="['content','deposit_form']">{{'Deposit Form'|translate}}</a>
          </li>
          <li class="active">
            <a [routerLink]="['content','solicitor_contract']">{{'Solicitor Contact'|translate}}</a>
          </li>
          <li class="active">
            <a [routerLink]="['content','management_agreement']">{{'Management Agreement'|translate}}</a>
          </li>
          <li class="active">
            <a [routerLink]="['content','useful_documents']">{{'Useful Document'|translate}}</a>
          </li>
  
        </ul>
  
  
  
  
      
  
  
      </ul>
    </div>
  </div>